<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorator="inc/layout"
>
<head>
    <meta charset="UTF-8"/>
    <title>全部用户</title>
    <script>


        function resetUserPwd(id) {
            layer.confirm('确定要重置密码吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.post(ctxPath + "user/resetPwd", {id: id}, function (data) {
                    layer.alert(data);
                })

            });

        }

        function editUser(id) {
            layer.open({
                type: 2,
                title: '修改',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '480px'],
                content: ctxPath + 'user/edit?id=' + id, //iframe的url
                end: function () {
                    location.reload();
                }
            })
        }

        function deleteUser(id) {
            layer.confirm('确定要删除该用户吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.post(ctxPath + "user/delete", {id: id}, function (data) {
                    layer.alert(data,function () {
                        location.reload();
                    });

                })

            });
        }

        function addUser() {
            layer.open({
                type: 2,
                title: '添加',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '520px'],
                content: ctxPath + 'user/add', //iframe的url
                end: function () {
                    location.reload();
                }
            })
        }

    </script>
</head>
<body>


<div class="container" layout:fragment="content">
    <button class="btn btn-sm btn-primary pull-right" onclick="addUser()">添加</button>

    <table class="table table-bordered  table-hover" style="margin-top: 50px">
        <thead>
        <tr class="success">
            <td>id</td>
            <td>name</td>
            <td>头像</td>
            <td>nickname</td>
            <td th:width="80">createTime</td>
            <td th:width="80">分组</td>
            <td th:width="80">角色</td>
            <td>资源</td>
            <td th:width="182">编辑</td>

        </tr>
        </thead>
        <tbody>

        <tr th:each="u:${users}">
            <td th:text="${u.id}"></td>
            <td th:text="${u.name}"></td>
            <td >
                <img id="myImg" th:src="${u.img}" style="margin: 0 auto" class="img-circle" height="80"/>
            </td>
            <td th:text="${u.nickname}"></td>

            <td th:switch="${u.createTime!=null}">
                <span th:case="true" th:text="${#dates.format(u.createTime, 'yyyy/MM/dd')}"></span>
                <span th:case="false">*****</span>
            </td>
            <td>
                <span th:if="${u.group!=null}" th:text="${u.group.name}"></span>
            </td>
            <td>
                <span th:if="${u.role!=null}" th:text="${u.role.name}"></span>
            </td>
            <td>
                <span th:if="${u.role!=null}">
                <span th:each="p:${u.role.permissions}">
                    <span th:text="${p.name}"></span>
                </span></span>
            </td>
            <td>
                <span style="cursor: pointer">
                    <span class="btn-primary btn-sm" th:onclick="'editUser(' + ${u.id} + ')'">编辑</span>
                    <span class="btn-primary btn-sm" th:onclick="'deleteUser(' + ${u.id} + ')'">删除</span>
                    <span class="btn-primary btn-sm" th:onclick="'resetUserPwd(' + ${u.id} + ')'">重置密码</span>
                </span>
            </td>
        </tr>
        </tbody>

    </table>


</div>


</body>
</html>